<script setup lang="ts">
import YinYang from './YinYang.vue'

interface Props {
  height?: number
  trigger?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  height: 30,
  trigger: false,
})

const value = defineModel('modelValue', { type: String, default: () => '111111' })
function getStyle(index: number) {
  return {
    height: `${props.height}px`,
    marginTop: index === 0 ? '0' : `${Math.round(props.height / 2)}px`,
  }
}
function updateValue(val: boolean, index: number) {
  const str = value.value
  value.value = `${str.slice(0, index)}${val ? '1' : '0'}${str.slice(index + 1)}`
}
</script>

<template>
  <div>
    <YinYang v-for="(val, index) in value" :key="index" :model-value="val === '1'" :trigger="props.trigger" :style="getStyle(props.height)" @update:model-value="val => updateValue(val as boolean, index)" />
  </div>
</template>
